<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<div id="app">
    <!-- v-text 获取data数据,设置标签内容,会覆盖之前的内容体-->
    <h2 v-text="message">百度</h2>
    <!-- 使用插值表达式,不会覆盖 -->
    <h2>{{message}}百度</h2>
    <!-- 拼接字符串 -->
    <h2 v-text="message+1"></h2>
    <h2 v-text="message+'abc'"></h2>
    <!-- 设置元素的innerHTML -->
    <h2 v-html="url"></h2>
    <h2 v-text="url"></h2><br>
    <!-- 使用v-on 绑定click 点击事件 -->
    <!-- 使用v-on 绑定click 点击事件 -->
<!--    <input type="button" value="点击按钮" v-on:click="show">-->
<!--    &lt;!&ndash; 简写 @方式 &ndash;&gt;-->
<!--    <input type="button" value="点击按钮" @click="show">-->
<!--    &lt;!&ndash; 双击事件 &ndash;&gt;-->
<!--    <input type="button" value="双击击按钮" @dblclick="show">-->
<!--    &lt;!&ndash; 绑定点击事件 &ndash;&gt;-->
<!--    <h2 @click="changeFood">{{food}}</h2>-->
</div>
<script src="../js/vue.min.js"></script>
<script src="../js/axios.min.js"></script>
<script>
    var VM = new Vue({
        el:"#app",
        data:{
            message:"Java程序员",
            url: "<a href='https://www.baidu.com'>百度一下</a>",
            food:"麻辣小龙虾"
        },
        methods() {
            // show:function() {
            //     alert("程序员!")
            // }
            // changeFood:function b(){
            //     //使用this获取
            //     console.log(this.food);
            //     //在VUE中不需要考虑如何更改DOM元素, 重点放在更改数据,数据更新之后,使用数据
            //     //的那个元素会同步更新
            //     this.food+="真好吃!";
            // }
        },

    })
</script>
</body>
</html>